<template>
  <ul @mouseleave="leavelist">
    <li
      v-for="(item, index) in $store.state.list"
      :key="item.id"
      @mouseover="hoverli(index)"
      :class="current === index ? 'liactive' : ''"
      @click="sendcontent(item.content)"
    >
      <span>{{ item.content }}</span>
      <span class="btn" @click="del(index)" v-show="current === index"
        >删除</span
      >
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
      default: -1,
      list:[]
    },
  },
  data() {
    return {
      current: -1,
    };
  },
  methods: {
    del(index) {
      this.$store.commit("changelist", { type: "del", index });
    },
    hoverli(index) {
      this.current = index;
    },
    sendcontent(content) {
      this.$emit("getcontent", content);
    },
    leavelist() {
      this.current = -1;
    },
  },
//   mounted(content){
//       this.list=this.$store.state.copylist
//       this.list=this.list.filter(item=>{
//           return item.content.includes(content)
//       })
//   },
  watch: {
    num() {
      this.current = this.num;
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  padding: 0 5px;
  li {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
  }
  li:nth-child(1) {
    border-top: 1px solid gainsboro;
  }
  .liactive {
    background-color: rgb(219, 216, 216);
  }
}
</style>